<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>招贤纳士</title>
    <link rel="shortcut icon" href="img/logo1.png">
    <!-- 引入css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/recruit.css">
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入js文件 -->
    <script src="js/recruit.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <header class="w">
            <div class="logo">
                <a href="./玄机科技.html"> <img :src="logoImg"></a>
            </div>
            <!-- 导航栏 start -->
            <div class="nav">
                <ul>
                    <li><a :href="about.name" target="_self">{{about.value}}</a></li>
                    <li>{{brand}}
                        <ul>
                            <li class="xl" v-for="imgSrc in imgSrc"><img :src="imgSrc"></li>
                        </ul>
                    </li>
                    <li v-for="navList in navList"><a :href="navList.name" target="_self">{{navList.value}}</a></li>
                </ul>
            </div>
            <!-- 导航栏 end-->
        </header>
        <main class="w">
            <!-- 滚轮 -->
            <div class="sr">
                <div class="li1">
                    <img :src="wxImg">
                    <div class="li2">
                        <img :src="QRCode">
                    </div>
                    <div class="li3">
                        <p></p>
                    </div>
                </div>
                <div class="li1" v-for="rollerBarImgList in rollerBarImgList">
                    <img :src="rollerBarImgList.img">
                    <div :class="rollerBarImgList.className"><a href="#">{{rollerBarImgList.value}}</a></div>
                </div>
            </div>
            <div class="pic">
                <img :src="picImg" alt="">
            </div>
            <div class="contact">
                <p :class="contact.className" v-for="contact in contact">{{contact.value}}</p>
            </div>
            <div class="join">
                <div class="am">
                    <div class="am-u-sm-3" v-for="joinList in joinList">
                        <img :src="joinList.imgSrc" style="width: 112px;margin: 0 auto;display: block;" />
                        <div class="txt" style="text-align: center;">
                            <h3>{{joinList.h3}}</h3>
                            <p>{{joinList.p}}<br>{{joinList.br}}<br></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="site w" style="width:500px;margin-top:80px;">
                <form action="#" method="get">
                    <input id="position" CLASS="input" style="width:380px;height:0px;background-color: #f3f3f3;" placeholder="职位关键字" type="text" name="word" value="">
                    <button type="button" id="sm_search" onclick="javascript:load_job()" class="button" style="padding-left:40px;background: url(http://statics.oneplus.cn/v2/img/career/index/icon-search.png) center no-repeat #eb0028;"> </button>
                </form>
            </div>

            <div class="list-content w" style="margin-bottom: 20px;">
                <table>
                    <thead>
                        <tr>
                            <th v-for="thList in thList">{{thList}}</th>
                        </tr>
                    </thead>
                    <tbody id="historical" v-for="hisList in hisList">
                        <tr class="list-tr">
                            <td>
                                <span class="career-title">{{hisList.ltrTitle}}</span>
                            </td>
                            <td>{{hisList.td1}}</td>
                            <td>{{hisList.td2}}</td>
                            <td>
                                <i>{{hisList.i}}</i>
                            </td>
                        </tr>
                        <tr class="detail-tr">
                            <td colspan="4">
                                <div class="detail-div" style="display: block;">
                                    <dl class="require">
                                        <dt>{{hisList.dl}}</dt>
                                        <dd>
                                            <p>{{hisList.dlp}}</p>
                                        </dd>
                                    </dl>
                                    <dl class="require">
                                        <dt>{{hisList.dt}}</dt>
                                        <dd>
                                            <p>{{hisList.p}}</p>
                                        </dd>
                                    </dl>
                                    <p class="ptn-box">
                                        <a href="#" class="email-job">{{hisList.a}}</a>
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="page w" style="display:none;">
                    <ul>
                        <li class="prev disabled"></li>
                        <li class="active" data-number="1">1</li>
                        <li data-number="2">2</li>
                        <li data-number="3">3</li>
                        <li data-number="4">4</li>
                        <li class="next"></li>
                    </ul>
                </div>
            </div>

        </main>
        <!-- 底部区域 -->
        <div class="footer w">
            <!-- 左侧 -->
            <div class="bottomLeft">
                <a></a>
            </div>
            <!-- 右侧 -->
            <div class="bottomRight">
                <ul>
                    <li>
                        <a href="#" v-for="bottomList in bottomList"> {{bottomList}} <span>|</span></a>

                    </li>
                    <li v-for="textList in textList">
                        <a href="#">{{textList}}</a>
                    </li>
                    <li>
                        <a href="#">
                            <img :src="bottomLogo" alt="">{{tel}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>